<template>
  <div class="addrList">
    <div class="title">收货地址</div>
    <ul>
      <li v-for="(addr, index) in addrList" :key="index" @click="addrId = addr.id" :class="{selectAddr: addr.id == addrId}">
        <span class="contact">{{ addr.contact }}</span>
        <span class="phone">{{ addr.phone }}</span>
        <span>{{ addr.province }} {{ addr.city }} {{ addr.district }} {{ addr.street }} {{ addr.address }}</span>
      </li>
    </ul>
  </div>
  <div class="cartList">
    <div class="title">我的商品</div>
    <ul>
      <li v-for="(cart, index) in cartList" :key="index">
        <el-row>
          <el-col :span="1" style="margin-right: 10px">
            <el-image :src="`${SERVER_ADDR}/goods/pic/${cart.goods.picList[0].url}`"
                      style="width: 50px; height: 50px" fit="contain"/>
          </el-col>
          <el-col :span="3">{{ cart.goods.name }}</el-col>
          <el-col :span="5">{{ cart.goods.color }} - {{ cart.goods.version }}</el-col>
          <el-col :span="3">￥{{ cart.goods.price }}元</el-col>
          <el-col :span="1">x{{ cart.count }}</el-col>
          <el-col :span="3">总价 ￥{{ cart.goods.price * cart.count }}</el-col>
        </el-row>
      </li>
    </ul>
  </div>
  <div class="footer">
    总金额：￥<span class="total">{{ totalPrice }}</span>元
    <el-button type="primary" class="createOrder" @click="createOrder">提交订单</el-button>
  </div>
</template>

<script setup>
import {useRoute} from "vue-router"
import {ElMessage} from "element-plus";
import userAddrApi from "@/api/userAddrApi.js";
import {ref} from "vue";
import cartApi from "@/api/cartApi.js";
import orderApi from "@/api/OrderApi.js";
import {useRouter} from "vue-router";
const router = useRouter()
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR)
const route = useRoute();
//所有地址
const addrList = ref([]);
//被选中的地址
const addrId = ref(null);
//当前用户选中的购物车
const cartList = ref([]);
//总金额
const totalPrice = ref(0);


//查询当前用户所有地址
function getAddrList() {
  userAddrApi.selectByUser()
      .then(resp=>{
        if (resp.code == 10000) {
          addrList.value = resp.data;
          addrList.value.forEach(addr => {
            if (addr.status == 1) {
              addrId.value = addr.id;
            }


          })
        } else {
          ElMessage.error(resp.msg);
        }
      });
}
getAddrList();
//查询当前用户已选择的购物车信息
function getCartList() {
  cartApi.selectByIds(route.query.cartIds)
      .then(resp=>{
        if (resp.code == 10000) {
          cartList.value = resp.data;
          //计算总金额
          cartList.value.forEach(cart => {
            totalPrice.value += cart.goods.price * cart.count;
          });
        } else {
          ElMessage.error(resp.msg);
        }
      });
}
getCartList();
//生成订单
function createOrder() {
  //判断有没有选择地址
  if (!addrId.value) {
    ElMessage.error("请选择收货地址");
    return;
  }
  //已选择的购物车的地址
  let cartIds = route.query.cartIds;
  let orderVo = {
    addrId: addrId.value,
    cartIds: cartIds
  }
  //发送请求生成订单
  orderApi.insert(orderVo)
      .then(resp=>{
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          //跳到后台首页
          router.push({
            path: "/user/pay",
            query: {
              orderId: resp.data.orderId

            }

          })
        } else {
          ElMessage.error(resp.msg);
        }
      });

}


</script>

<style scoped>
.addrList, .cartList, .footer {
  margin: 20px 0;
  padding: 20px;
  border: 2px solid #222;
  background-color: #FFFFFF;
}
.footer {
  text-align: right;
}
.footer .createOrder {
  margin-left: 15px;
}
.footer .total {
  font-weight: bold;
  font-size: 18px;
  color: var(--theme-color);
}
.addrList, .cartList .title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}
.addrList ul li {
  margin: 10px 0 10px 15px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #AAA;
  width: 800px;
  cursor: pointer;
}
.addrList .contact {
  text-align: center;
  margin-right: 15px;
  display: inline-block;
  width: 100px;
}
.addrList .phone {
  text-align: center;
  margin-right: 15px;
  display: inline-block;
  width: 150px;
}
.addrList ul li:hover {
  border: 2px solid var(--theme-color);
}
.addrList .selectAddr {
  border: 2px solid #AAA;
  background-color: var(--theme-color);
}
.cartList ul li {
  margin: 10px 0 10px 15px;
  height: 50px;
  line-height: 50px;
}
</style>